<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
</head>
<img>

商品管理：
<br/>
<br/>

<img src="http://daniu1011.oss-cn-beijing.aliyuncs.com/790d56ec-6544-4240-afed-7bd7e7470510.png?Expires=1618472552&OSSAccessKeyId=LTAI5tDRH2vSBmsGgQp51v7b&Signature=%2FOlqCHVM0Xbwjag5icEvCYEtodQ%3D" ></img>
<form id="form1" name="form1" method="post" action="">
    <p>
        <label>商品图片
            <input type="file" name="productcover" id="productcover" />
        </label>
    </p>
    <p>
        <label>
            <input type="button" name="upload" id="upload" value="上传"/>
        </label>

    </p>
</form>
</body>
<script src="/webjars/jquery/3.6.0/jquery.js"></script>
<script>
    $("#upload").click(function () {

        var file = $('#productcover')[0].files[0];

        if(file == null){

            alert("请选择文件");

            // 停止继续执行
            return;
        }

        // 键值对结合 k v 提交的数据可以直接转为对象 文本+文件一起上传
        var formData = new FormData();

        formData.append("cover", file);

        $.ajax({
            type : "POST",
            url : "upload",
            data : formData,
            // 接收后台的数据类型
            dataType : "text",
            // 告诉jQuery不要去处理发送的数据，用于对data参数进行序列化处理 这里必须false
            processData : false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType : false,

            // 请求成功
            success : function(message) {

                if (message == "-1"){

                    alert("请选择文件！");

                } else if (message == "1") {

                    alert("文件上传成功");

                }else {

                    alert("文件上传失败");

                }

            },

            //请求失败
            error : function(message) {

                alert("请求失败");

            }

        });

    })

</script>


</html>